<template>
	<div>
		<el-row :span="24">
			<el-col :sm="24" :xs="0">
				<PcHedaer ref="pcHedaer"></PcHedaer>
				<div class="pc_con">
					<PcDrawer ref="pcDrawer" :navIndex="navIndex1" :navs="navs" :changeNav="changeNav1"></PcDrawer>
					<div class="bghhhhh">
						<div class="rightCon">
							<headerPcTow :title="$t('l_shouji')" :isShow="true"></headerPcTow>

							<div class="conTow" v-if="step == 1">
								<div class="textTow">{{$t('l_yanzhengtixianmima')}}</div>
								<div class="Ou1aviPriFX421w97dGATow">
									<div>{{$t('l_tixianmima')}}</div>
									<span class="R1tVtJPfBJA944lSRyyPTow" v-if="mask" @click="mask = !mask">
										<i class="M2AXg2u2tA9h8un7RCbH"
											style="display: inline-flex; justify-content: center; align-items: center;">
											<svg viewBox="0 0 26 21.514" width="1em" height="1em" fill="currentColor"
												aria-hidden="true" focusable="false">
												<use xlink:href="/icons/icon.svg#comm_icon_hide--sprite"></use>
											</svg>
										</i>
									</span>
									<span class="R1tVtJPfBJA944lSRyyPTow" v-if="!mask" @click="mask = !mask">
										<i class="MOFLcj7nVRZHKLivuWpP"
											style="display: inline-flex; justify-content: center; align-items: center;">
											<svg viewBox="0 0 26 21.514" width="1em" height="1em" fill="currentColor"
												aria-hidden="true" focusable="false">
												<use xlink:href="/icons/icon.svg#comm_icon_show--sprite"></use>
											</svg>
										</i>
									</span>
								</div>
								<!-- 密码输入框 -->
								<!-- <van-password-input :value="value" :mask="mask" info="密码为 6 位数字" :focused="showKeyboard"
									@focus="showKeyboard = true" /> -->
								<!-- 数字键盘 -->
								<!-- <van-number-keyboard v-model="value" :show="showKeyboard" @blur="showKeyboard = false" /> -->
								<el-input v-model="value" placeholder="" :show-password="true" v-if="mask"
									class="phonePass" />
								<el-input v-model="value" placeholder="" :show-password="false" v-if="!mask"
									class="phonePass" />
								<!-- <div class="moreTow" @click="zzc = true">{{$t('l_qitayanzheng')}}</div> -->
								<div class="pc_btngroup" @click="verifyPass">
									<div class="pc_btns">{{$t('l_xiayibu')}}</div>
								</div>
							</div>
							<div class="zzc" v-show="zzc">
								<div class="zzcboxTow">
									<div class="zzcconTow">
										<div class="zzctextTow">{{$t('l_qitayanzheng')}}</div>
										<div class="zzccon1Tow">
											<div class="zzccon1boxTow">
												<i class="anticonTow">
													<i aria-hidden="true" focusable="false"></i>
												</i>
												<span>{{$t('l_yanzhengtixianmima')}}</span>
											</div>
										</div>
										<div class="zzctext2Tow">
											{{$t('l_fangfabukeyong')}}<span>{{$t('l_lianxikefu')}}</span></div>
										<img @click="zzc = false" class="closeIconTow"
											src="../../assets/images/yh/main.f9fa3765529e3b5b42fa.png" alt="">
									</div>
								</div>
							</div>
							<div class="conTow" v-if="step == 0">
								<div class="textTow">{{$t('l_bangdingshouji')}}</div>
								<div class="item1Tow">
									<div class="left1Tow">
										<i class="anticon1Tow">
											<i
												style="display: inline-flex; justify-content: center; align-items: center;">
												<svg viewBox="0 0 13.792 23" width="1em" height="1em"
													fill="currentColor" aria-hidden="true" focusable="false">
													<use xlink:href="/icons/icon.svg#icon_dl_sj--sprite"></use>
												</svg>
											</i>
										</i>
										<img src="../../assets/images/img/ChineseMainland.png" alt="">
										<el-select v-model="mp" popper-class="dropdown" :popper-append-to-body="false"
											class="delInpout">
											<el-option label="+86" value="0">
												<div
													style="display: flex;justify-content: space-between;align-items: center;">
													<span>
														<img class="img"
															src="../../assets/images/img/ChineseMainland.png" alt="">
													</span>
													<span>+86</span>
												</div>
											</el-option>
										</el-select>
									</div>
									<el-input v-model="input" :placeholder="$t('l_shurushoujihao')" clearable
										class="phoneInput" />
								</div>
								<div class="item1Tow item2Tow">
									<div class="left2Tow">
										<i class="anticon1Three" style="margin-top: -4px;">
											<i
												style="display: inline-flex; justify-content: center; align-items: center;">
												<svg viewBox="0 0 13.792 23" width="1em" height="1em"
													fill="currentColor" aria-hidden="true" focusable="false">
													<use xlink:href="/icons/icon.svg#icon_dl_yz--sprite"></use>
												</svg>
											</i>
										</i>
									</div>
									<el-input v-model="yzm" :placeholder="$t('l_shuruyanzhengma')" clearable
										class="phoneInputTow" />
									<span @click="sendSms">{{time>0?time+'s':$t('l_huoquyanzhengma')}}</span>
								</div>
								<div class="pc_btngroup">
									<div class="pc_btns" @click="bandMobile">{{$t('l_queding')}}</div>
								</div>
							</div>

						</div>
					</div>
				</div>
			</el-col>
			<el-col :sm="0" :xs="24">
				<navHeader :title="$t('l_shouji')"></navHeader>

				<div class="con" v-if="step == 0">
					<div class="text">{{$t('l_yanzhengtixianmima')}}</div>
					<div class="Ou1aviPriFX421w97dGA">
						<div>{{$t('l_tixianmima')}}</div>
						<span class="R1tVtJPfBJA944lSRyyP" v-if="mask" @click="mask = !mask">
							<i class="M2AXg2u2tA9h8un7RCbH"
								style="display: inline-flex; justify-content: center; align-items: center;">
								<svg viewBox="0 0 26 21.514" width="1em" height="1em" fill="currentColor"
									aria-hidden="true" focusable="false">
									<use xlink:href="/icons/icon.svg#comm_icon_hide--sprite"></use>
								</svg>
							</i>
						</span>
						<span class="R1tVtJPfBJA944lSRyyP" v-if="!mask" @click="mask = !mask">
							<i class="MOFLcj7nVRZHKLivuWpP"
								style="display: inline-flex; justify-content: center; align-items: center;">
								<svg viewBox="0 0 26 21.514" width="1em" height="1em" fill="currentColor"
									aria-hidden="true" focusable="false">
									<use xlink:href="/icons/icon.svg#comm_icon_show--sprite"></use>
								</svg>
							</i>
						</span>
					</div>
					<!-- 密码输入框 -->
					<van-password-input :value="value" :mask="mask" :info="$t('l_mimaliuwei')" :focused="showKeyboard"
						@focus="showKeyboard = true" />
					<!-- 数字键盘 -->
					<van-number-keyboard v-model="value" :show="showKeyboard" @blur="showKeyboard = false" />
					<!-- <div class="more" @click="zzc = true">{{$t('l_qitayanzheng')}}</div> -->
					<div class="orkXHvtNM5R_5twq6l5I" @click="verifyPass">
						<div class="baocun">{{$t('l_xiayibu')}}</div>
					</div>
				</div>
				<div class="zzc" v-show="zzc">
					<div class="zzcbox">
						<div class="zzccon">
							<div class="zzctext">{{$t('l_qitayanzheng')}}</div>
							<div class="zzccon1">
								<div class="zzccon1box">
									<i class="anticon">
										<i aria-hidden="true" focusable="false"></i>
									</i>
									<span>{{$t('l_yanzhengtixianmima')}}</span>
								</div>
							</div>
							<div class="zzctext2">{{$t('l_fangfabukeyong')}}<span>{{$t('l_lianxikefu')}}</span></div>
							<img @click="zzc = false" class="closeIcon"
								src="../../assets/images/yh/main.f9fa3765529e3b5b42fa.png" alt="">
						</div>
					</div>
				</div>
				<div class="con" v-if="step == 1">
					<div class="text1">{{$t('l_bangdingshouji')}}</div>
					<div class="item1">
						<div class="left1">
							<i class="anticon1">
								<i style="display: inline-flex; justify-content: center; align-items: center;">
									<svg viewBox="0 0 13.792 23" width="1em" height="1em" fill="currentColor"
										aria-hidden="true" focusable="false">
										<use xlink:href="/icons/icon.svg#icon_dl_sj--sprite"></use>
									</svg>
								</i>
							</i>
							<!-- <img src="../../assets/images/img/ChineseMainland.png"
								alt=""> -->
							<el-select v-model="mp" popper-class="dropdown" :popper-append-to-body="false">
								<el-option label="+86" value="0">
									<div style="display: flex;justify-content: space-between;align-items: center;">
										<span>
											<img class="img" src="../../assets/images/img/ChineseMainland.png" alt="">
										</span>
										<span>+86</span>
									</div>
								</el-option>
							</el-select>
						</div>
						<el-input v-model="input" :placeholder="$t('l_shurushoujihao')" clearable />
					</div>
					<div class="item1 item2">
						<div class="left2">
							<i class="anticon1" style="margin-top: -4px;">
								<i style="display: inline-flex; justify-content: center; align-items: center;">
									<svg viewBox="0 0 13.792 23" width="1em" height="1em" fill="currentColor"
										aria-hidden="true" focusable="false">
										<use xlink:href="/icons/icon.svg#icon_dl_yz--sprite"></use>
									</svg>
								</i>
							</i>
						</div>
						<el-input v-model="yzm" :placeholder="$t('l_shuruyanzhengma')" clearable />
						<span @click="sendSms">{{time>0?time+'s':$t('l_huoquyanzhengma')}}</span>
					</div>
					<div class="orkXHvtNM5R_5twq6l5I">
						<div class="baocun" @click="bandMobile">{{$t('l_queding')}}</div>
					</div>
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import navHeader from '../../components/navHeader.vue'
	import PcHedaer from '../../components/pcheader.vue'
	import PcDrawer from '../../components/pcdrawer.vue'
	import headerPcTow from '../../components/headerPcTow.vue'
	export default {
		components: {
			navHeader,
			PcHedaer,
			PcDrawer,
			headerPcTow
		},
		data() {
			return {
				value: '',
				mask: true,
				showKeyboard: false,

				zzc: false,
				step: 0,

				mp: '+86',
				input: '',
				yzm: '',
				userInfo: null,
				time: 0,
				navIndex: 0,
				navs: [{
						id: 0,
						name: this.$t('l_remen'),
						key: 'icon_game_menu_active_0',
					},
					{
						id: 2,
						name: this.$t('l_dianzi'),
						key: 'icon_game_menu_active_3',
					},
					{
						id: 7,
						name: this.$t('l_qipai'),
						key: 'icon_game_menu_active_1',
					},
					{
						id: 6,
						name: this.$t('l_buyu'),
						key: 'icon_game_menu_active_2',
					},
					{
						id: 1,
						name: this.$t('l_zhenren'),
						key: 'icon_game_menu_active_4',
					},
					{
						id: 4,
						name: this.$t('l_tiyu'),
						key: 'icon_game_menu_active_5',
					},
					{
						id: 3,
						name: this.$t('l_caipiao'),
						key: 'icon_game_menu_active_8',
					},

					{
						id: -2,
						name: this.$t('l_zuijin'),
						key: 'icon_game_menu_active_100',
					},
					// {
					// 	id: -3,
					// 	name: '收 藏',
					// 	key: 'icon_game_menu_active_101',
					// },
					{
						id: -4,
						name: this.$t('l_sousuo'),
						key: 'comm_icon_ss',
					},
				],
				navIndex1: 0
			}
		},
		mounted() {
			this.reloadUserInfo()
		},
		methods: {
			openMenus() {
				this.$refs.pcDrawer.openMenus()
			},
			closeMenus() {
				this.$refs.pcDrawer.closeMenus()
			},
			changeNav1(item) {
				this.$router.push('/')
			},
			verifyPass() {
				const loading = this.$loading({
					lock: true,
					text: 'Loading',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				this.$api.verifyPayPass({
					payword: this.value.substring(0, 6)
				}, (res) => {
					loading.close()
					if (res.code == 0) {
						this.step = 1
					} else {
						this.$message.error(res.msg);
					}
				})
			},
			reloadUserInfo(reload = false) {
				const loading = this.$loading({
					lock: true,
					text: 'Loading',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				this.$api.userGetUserInfo({
					reload: reload ? 1 : 0
				}, (res) => {
					loading.close()
					if (res.code == 0) {
						this.userInfo = res.data
						this.input = this.userInfo.mobile
						localStorage.setItem('userInfo', JSON.stringify(res.data))
					} else {
						this.$message.error(res.msg);
					}
				})
			},
			sendSms() {
				if (this.time > 0) {
					return;
				}
				const loading = this.$loading({
					lock: true,
					text: 'Loading',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				this.$api.sendSmsCode({
					mp: this.mp,
					mobile: this.input
				}, (res) => {
					loading.close()
					if (res.code == 0) {
						this.time = 60;
						let inv = setInterval(() => {
							this.time--;
							if (this.time == 0) {
								clearInterval(inv)
							}
						}, 1000)
					} else {
						this.$message.error(res.msg);
					}
				})
			},
			bandMobile() {
				const loading = this.$loading({
					lock: true,
					text: 'Loading',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				this.$api.bandMobile({
					mobile: this.input,
					code: this.yzm
				}, (res) => {
					loading.close()
					if (res.code == 0) {
						this.$message.success(this.$t('l_caozuochenggong'));
						setTimeout(() => {
							this.$router.push('/mine/mine')
						}, 600)
					} else {
						this.$message.error(res.msg);
					}
				})
			}
		}
	}
</script>


<style scoped>
	* {
		box-sizing: border-box;
	}

	.con {
		width: 100%;
		padding: 0.4rem 0.2rem 0.2rem;
	}

	.conTow {
		width: 100%;
		background-color: var(--theme-top-nav-bg);;
		border-radius: 7px;
		margin-top: 15px;
		padding: 25px 30% 50px;
	}

	.textTow {
		font-size: 15px;
		color: #ffffff;
		font-weight: 700;
		text-align: left;
	}

	/* pc */
	.bghhhhh {
		flex: 1;
		height: 300px;
	}

	.rightCon {
		width: 75%;
		margin: 0 auto;
	}

	.pc_con {
		width: 100%;
		display: flex;
		justify-content: flex-start;
	}

	.text {
		font-size: .24rem;
		color: #ffffff;
		font-weight: 700;
		/* max-width: 2.6rem; */
		text-align: left;
	}

	.Ou1aviPriFX421w97dGATow {
		width: 100%;
		color: #ffffff;
		font-size: 13px;
		margin-bottom: 10px;
		margin-top: 10px;
		align-items: center;
		display: flex;
		justify-content: space-between;
	}

	.Ou1aviPriFX421w97dGA {
		width: 100%;
		color: #ffffff;
		font-size: .22rem;
		height: 0.32rem;
		margin-bottom: 0.15rem;
		margin-top: 0.3rem;
		align-items: center;
		display: flex;
		justify-content: space-between;
	}

	.R1tVtJPfBJA944lSRyyP {
		font-size: .36rem;
	}

	.R1tVtJPfBJA944lSRyyPTow {
		font-size: 20px;
		cursor: pointer;
	}

	.M2AXg2u2tA9h8un7RCbH {
		color: var(--theme-color-line);
	}

	.MOFLcj7nVRZHKLivuWpP {
		color: var(--theme-primary-color);
	}

	/deep/ .van-password-input {
		margin: 0;
	}

	/deep/ .van-password-input__security li {
		background: var(--theme-main-bg-color);
		color: #fff;
	}

	/deep/ .van-password-input__security i {
		background-color: #fff;
	}

	/deep/ .van-password-input__info {
		margin-top: 0.1rem;
		color: #ea4e3d;
		font-size: .18rem;
		height: 0.4rem;
		line-height: 1;
		margin-bottom: -0.4rem;
		text-align: left;
	}

	.more {
		width: 100%;
		text-align: right;
		font-size: .22rem;
		color: var(--theme-primary-color);
		margin-top: 0.3rem;
	}

	.moreTow {
		width: 100%;
		text-align: right;
		font-size: 12px;
		color: var(--theme-primary-color);
		cursor: pointer;
		margin-top: 10px;
	}

	.orkXHvtNM5R_5twq6l5I {
		align-items: center;
		background-color: var(--theme-main-bg-color);
		box-shadow: 0 -0.03rem 0.1rem 0 rgb(0 0 0 / 10%);
		display: flex;
		height: 1.3rem;
		justify-content: space-between;
		padding: 0 0.2rem;
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 10;
	}

	.baocun {
		color: #ffffff;
		font-size: .24rem;
		height: 0.7rem;
		line-height: .7rem;
		text-align: center;
		width: 100%;
		border-radius: 0.14rem;
		background-color: var(--theme-primary-color);
    border-color: var(--theme-primary-color);
	}

	.zzc {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 20;
		background-color: rgba(0, 0, 0, .55);
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.zzcbox {
		width: 6rem;
		max-width: calc(100vw - 16px);
		color: rgba(0, 0, 0, .65);
		font-size: 14px;
		font-variant: tabular-nums;
		line-height: 1.5;
		list-style: none;
	}

	.zzcboxTow {
		width: 400px;
		/* max-width: calc(100vw - 16px); */
		color: rgba(0, 0, 0, .65);
		font-size: 14px;
		font-variant: tabular-nums;
		list-style: none;
	}

	.zzccon {
		height: auto;
		background-color: var(--theme-top-nav-bg);;
		border: 1px solid;
		border-color: var(--theme-color-line);
		border-radius: 0.2rem;
		position: relative;
		padding: 0.2rem 0.3rem 0.3rem !important;
	}

	.zzcconTow {
		height: auto;
		background-color: var(--theme-top-nav-bg);;
		border: 1px solid;
		border-color: var(--theme-color-line);
		border-radius: 10px;
		position: relative;
		padding: 20px 15px;
	}

	.zzctext {
		font-weight: 700;
		color: #ffffff;
		font-size: .3rem !important;
		line-height: 1.4;
		text-align: center;
	}

	.zzctextTow {
		font-size: 17px;
		font-weight: 700;
		color: #ffffff;
		text-align: center;
	}

	.zzccon1 {
		margin-top: 0.4rem;
		display: flex;
		justify-content: center;
		width: 100%;
	}


	.zzccon1Tow {
		margin-top: 20px;
		display: flex;
		justify-content: center;
		width: 100%;
	}

	.zzccon1box {
		border-radius: 0.14rem;
		height: 0.7rem;
		padding: 0.12rem 0.05rem 0.12rem 0.2rem;
		width: 2.6rem;
		align-items: center;
		border: 0.01rem solid var(--theme-color-line);
		display: flex;
		justify-content: space-between;
	}

	.zzccon1boxTow {
		border-radius: 5px;
		height: 40px;
		padding: 10px 5px 10px 3px;
		width: 145px;
		align-items: center;
		border: 1px solid var(--theme-color-line);
		display: flex;
		color: var(--theme-text-color);
		font-size: 14px;
		cursor: pointer;
		justify-content: space-between;
	}

	.anticon {
		text-rendering: optimizeLegibility;
		-webkit-font-smoothing: antialiased;
		color: inherit;
		display: inline-block;
		font-style: normal;
		line-height: 0;
		text-align: center;
		text-transform: none;
		vertical-align: -0.125em;
	}

	.anticon i {
		display: inline-block;
		position: relative;
		width: 0.46rem;
		height: 0.46rem;
		background-image: url('../../assets/images/yh/img.png');
		background-position: 0rem -2.254rem;
		background-size: 4.67667rem 4.416rem;
	}

	.anticonTow {
		text-rendering: optimizeLegibility;
		-webkit-font-smoothing: antialiased;
		color: inherit;
		display: inline-block;
		font-style: normal;
		line-height: 0;
		text-align: center;
		text-transform: none;
		vertical-align: -10px;
	}

	.anticonTow i {
		display: inline-block;
		position: relative;
		width: 33px;
		height: 33px;
		background-image: url(/img/img.96c4632f.png);
		background-position: 0rem -2.254rem;
		background-size: 329px 306px;
	}

	.zzccon1box span {
		font-size: .22rem;
		width: 1.84rem;
		color: var(--theme-text-color);
		line-height: 1.2;
		text-align: center;
	}

	.zzctext2 {
		color: var(--theme-alt-neutral-2);
		margin-top: 0.4rem;
		font-size: .22rem;
		text-align: center;
	}

	.zzctext2 span {
		color: var(--theme-primary-color);
	}

	.zzctext2Tow {
		color: var(--theme-alt-neutral-2);
		margin-top: 20px;
		font-size: 13px;
		text-align: center;
	}

	.zzctext2Tow span {
		color: var(--theme-primary-color);
	}

	.closeIcon {
		align-items: center;
		background: none;
		border-radius: 50%;
		bottom: -0.9rem;
		display: flex;
		height: 0.6rem;
		justify-content: center;
		margin-right: -0.3rem;
		position: absolute;
		right: 50%;
		top: auto;
		width: 0.6rem;
	}

	.closeIconTow {
		align-items: center;
		background: none;
		border-radius: 50%;
		bottom: -50px;
		display: flex;
		height: 30px;
		justify-content: center;
		position: absolute;
		right: 50%;
		transform: translateX(25%);
		top: auto;
		width: 30px;
		cursor: pointer;
	}

	.closeIcon img {
		height: 100%;
		width: 100%;
	}

	.closeIconTow img {
		height: 100%;
		width: 100%;
	}

	.text1 {
		font-size: .24rem;
		margin-bottom: 0.4rem;
		margin-top: 0;
		color: #ffffff;
		font-weight: 700;
	}

	.item1 {
		line-height: 1.5;
		margin: 0;
		padding: 0;
		position: relative;
		width: 100%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		background-color: var(--theme-main-bg-color);
 		   border-color: var(--theme-color-line)!important;
		border: 1px solid;
		border-radius: 0.14rem;
		height: 0.7rem;
		margin-bottom: 0.3rem;
	}

	.item1Tow {
		margin: 0;
		padding: 0;
		position: relative;
		width: 100%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		background-color: var(--theme-top-nav-bg);;
		border-color: #293548 !important;
		border: 1px solid;
		border-radius: 5px;
		height: 35px;
		margin-top: 15px;
	}

	.left1 {
		width: 2.2rem;
		padding-left: 0.2rem;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.left1Tow {
		width: 30%;
		padding-left: 5px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.anticon1 {
		height: 0.25rem;
		width: 0.25rem;
		color: var(--theme-color-line)!important;
		font-size: 12px;
	}

	.anticon1Tow {
		height: 15px;
		color: var(--theme-color-line)!important;
		font-size: 12px;
		margin-right: 5px;
	}

	.anticon1Three {
		height: 15px;
		width: 25px;
		color: var(--theme-color-line)!important;
		font-size: 18px;
		margin-left: 5px;
	}

	.left1 img,
	.img {
		width: 0.28rem;
		height: 0.21rem;
		margin: 0 0.15rem 0 0.1rem;
	}

	.left1Tow img,
	.img {
		width: 20px;
		height: 15px;
	}

	.el-select {
		flex: 1;
	}

	/deep/ .el-input__inner {
		height: 0.5rem !important;
		border: 0;
		padding: 0 !important;
		color: #55657e !important;

	}

	/deep/.el-select .dropdown {
		background-color: var(--theme-top-nav-bg) !important;
		border-color: #293548 !important;
	}

	/deep/.el-select .popper__arrow {
		border-bottom-color: #293548 !important;
	}

	/deep/.el-select .el-popper .popper__arrow::after {
		border-bottom-color: #293548 !important;
	}

	.el-input {
		flex: 1;
		border-left: 1px solid var(--theme-color-line);
		padding-left: .2rem;
	}

	.left2 {
		width: 0.6rem;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	。 .left2 svg {
		font-size: 18px;
	}

	.left2Tow {
		width: 30px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	。 .left2Tow svg {
		font-size: 30px;
	}


	.item2 .el-input {
		border-left: 0;
		padding-left: 0;
	}

	.item2 span {
		color: var(--theme-color-line)!important;
		font-size: .22rem;
		max-width: 1.8rem;
		margin-right: .2rem;
	}

	.item2Tow .el-input {
		border-left: 0;
		padding-left: 0;
	}

	.item2Tow span {
		color: var(--theme-color-line)!important;
		font-size: 12px;
		width: 25%;
		cursor: pointer;
		margin-right: 5px;
	}

	.pc_btngroup {
		width: 100%;
		align-items: center;
		display: flex;
		justify-content: center;
		padding-bottom: 47px;
		margin-top: 30px;
		cursor: pointer;
	}

	.pc_btns {
		font-size: 15px;
		height: 43px;
		line-height: 43px;
		white-space: normal;
		width: 143px;
		text-align: center;
		background-color: var(--theme-primary-color);
		border-color: var(--theme-primary-color);
		color: var(--theme-primary-font-color);
		border-radius: 7px;
	}
</style>
<style>
	.phonePass {
		border: 1px solid;
		background-color: var(--theme-main-bg-color);
		border-color: var(--theme-color-line) !important;
		border-radius: 5px;
		padding-left: 0 !important;
		font-size: 17px !important;
	}

	.phonePass .el-input__inner {
		height: 34px !important;
		border: 0 !important;
		width: 90% !important;
		padding: 0 !important;
		color: #55657e !important;
		font-size: 17px !important;
		margin-left: 10px !important;
		padding-left: 0 !important;
	}

	.delInpout .el-input__inner {
		font-size: 14px !important;
		height: 30px !important;
		margin-left: 5px !important;
	}

	.phoneInput {
		padding-left: 0 !important;
	}

	.phoneInput .el-input__inner {
		height: 33px !important;
		border: 0 !important;
		width: 80% !important;
		padding: 0 !important;
		color: #55657e !important;
		font-size: 14px !important;
		margin-left: 10px !important;
		padding-left: 0 !important;
	}

	.phoneInputTow {
		padding-left: 0 !important;
	}

	.phoneInputTow .el-input__inner {
		height: 33px !important;
		border: 0 !important;
		width: 80% !important;
		padding: 0 !important;
		color: #55657e !important;
		font-size: 14px !important;
		margin-left: 0px !important;
		padding-left: 0 !important;
	}
</style>